﻿@page "/rich-text-editor/inline"

@using Syncfusion.Blazor.RichTextEditor

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the toolbar show on inline mode. Toolbar will appear when you select the below editable content and it will hide when you focus out from the edit area.</p>
</SampleDescription>
<ActionDescription>
   <p>The <a href="https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor">Blazor Rich Text Editor</a> provides an option to display toolbar on demand using the <code>InlineMode</code> property. Set mode as inline to enable inline editor. The toolbar becomes visible only when the content is selected.</p>
</ActionDescription>

<div class="control-section" id="pageHeight">
    <SfRichTextEditor>
        <p>The sample is configured with the inline mode of the editor. Initially, the editor is rendered without a <a href="https://blazor.syncfusion.com/home/" target='_blank'>toolbar</a>. The toolbar becomes visible only when the content is selected.</p>
        <RichTextEditorToolbarSettings Items="@ToolsForInline" />
        <RichTextEditorInlineMode Enable="true" ShowOnSelection="true" /> 
    </SfRichTextEditor>
</div>

@code {
    private List<ToolbarItemModel> ToolsForInline = new List<ToolbarItemModel>()
    {
        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
        new ToolbarItemModel() { Command = ToolbarCommand.Underline },
        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
        new ToolbarItemModel() { Command = ToolbarCommand.HorizontalSeparator },
        new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink }
    };
}